<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>card table</title>
    <link rel="stylesheet" href="/html/static/ajax/libs/layui/css/layui.css" media="all">
    <script src="/html/static/ajax/libs/layui/layui.js"></script>
</head>

<body>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">卡片标题</label>
            <div class="layui-input-inline">
                <input type="text" name="realName" id="realName" placeholder="" class="layui-input">
            </div>
            <label class="layui-form-label">卡片名称</label>
            <div class="layui-input-inline">
                <input type="text" name="username" id="username" placeholder="" class="layui-input">
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                        class="layui-icon">&#xe615;</i> 搜 索</button>
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i
                        class="layui-icon">&#xe615;</i> 获取数据</button>
            </div>
        </div>
    </form>
    <div id="currentTableId" lay-filter="currentTableFilter"></div>
    <script type="text/html" id="currentTableBar">
		<a class="layui-btn layui-btn-sm layui-btn-normal data-info-btn" lay-event="details"><i class="layui-icon">&#xe60b;</i></a>
	</script>
    <script>
        layui.config({
            base: '/html/static/ajax/libs/layui/extend/' //配置 layui 第三方扩展组件存放的基础目录
        }).extend({
            cardTable: 'cardTable/cardTable'
        }).use(['layer', 'form', 'jquery', 'cardTable'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;
            let cardTable = layui.cardTable;

            var currentTable = cardTable.render({
                elem: '#currentTableId',
                //此为动态
                //url: '/card.json', 
                //此为静态
                limit: 12, //每页数量默认是每行数量的双倍
                linenum: 6, //每行数量 2,3,4,6
                data: [{
                    "id": "1",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "2",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "3",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "4",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
                    "title": "React",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "5",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "6",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "7",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "8",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
                    "title": "React",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "9",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "10",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "11",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "12",
                    "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
                    "title": "React",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "13",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "14",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "15",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "16",
                    "title": "React",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "17",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "18",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "19",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "20",
                    "title": "React",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "21",
                    "title": "Alipay",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }, {
                    "id": "22",
                    "title": "Layui",
                    "remark": "生命就像一盒巧克力，结果往往出人意料",
                    "time": "几秒前"
                }, {
                    "id": "23",
                    "title": "Angular",
                    "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
                    "time": "几秒前"
                },
                {
                    "id": "24",
                    "remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
                    "time": "几秒前"
                }],
                toolbar: 'currentTableBar',
            })
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                queryJson = data.field;
                cardTable.reload("currentTableId", {
                    where: queryJson,
                });
                return false;
            });
            //卡片单击事件
            currentTable.on('row(currentTableFilter)', function (obj) {
                layer.msg("单击事件");
                return false;
            });
            //卡片双击事件
            currentTable.on('rowDouble(currentTableFilter)', function (obj) {
                layer.msg("双击事件");
                return false;
            });
            //toolrow监听事件
            currentTable.on('tool(currentTableFilter)', function (obj) {
                if (obj.event === 'details') {
                    layer.msg("按钮事件");
                }
                return false;
            });
            form.on('submit(data-btn)', function () {
                var data = cardTable.getAllData("currentTableId");
                layer.msg(JSON.stringify(data));
                return false;
            });
        })
    </script>
</body>

</html>